<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title>管理系统</title>
	<meta name="Robots" content="All" />
	<meta http-equiv='content-language' content='zh-CN'>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
	<script src="../style/js/vue.min.js" type="text/javascript" charset="utf-8"></script>
	<link rel="stylesheet" href="../style/css/element-ui.css">
	<link rel="stylesheet" href="../style/css/animate.min.css" />
	<script src="../style/js/element-ui.js"></script>
	<script src="../style/js/axios.min.js"></script>
	<link rel="stylesheet" href="../style/css/index.css" />
</head>
<body bgcolor="#eee">
<div id="app">
<el-container>
  <el-main>
	  <div class="data">
	  	<h2>本月数据总览</h2>
		<hr />
		<div class="data-info">
			<div><el-statistic title="采购额">
				<template slot="formatter"> 99999.0元 </template>
			</el-statistic>		</div>
			<div><el-statistic title="销售额">
				<template slot="formatter"> 159999.0元 </template>
			</el-statistic>		</div>
			<div><el-statistic title="利润">
				<template slot="formatter"> 60000.0元 </template>
			</el-statistic>		</div>
			<div><el-statistic title="快递费">
				<template slot="formatter">500.0元 </template>
			</el-statistic>		</div>
		</div>
	  </div>
	  
	  <div class="data">
	  	<h2>本月任务</h2>
	  	<hr />
		<div class="data-info-rw">
			<span>采购额（￥100000/99999元）</span>	
			<el-progress :text-inside="true" :stroke-width="26" :percentage="99"></el-progress>	
			<span>销售额（￥200000/159999元）</span>	
			<el-progress :text-inside="true" :stroke-width="24" :percentage="80" status="success"></el-progress>	
			<span>利润（￥80000/60000元）</span>	
			<el-progress :text-inside="true" :stroke-width="22" :percentage="75" status="warning"></el-progress>
			<span>售后（少于20/10次）</span>	
			<el-progress :text-inside="true" :stroke-width="20" :percentage="50" status="exception"></el-progress>
		</div>
	  </div>
	  
	  <div class="data">
	  	<h2>代办事项</h2>
		<hr />
		<el-table
		    :data="tableData"
		    stripe
		    style="width: 100%">
		    <el-table-column
		      prop="date"
		      label="日期"
		      width="180">
		    </el-table-column>
		    <el-table-column
		      prop="name"
		      label="姓名"
		      width="180">
		    </el-table-column>
		    <el-table-column
		      prop="address"
		      label="事件">
		    </el-table-column>
			<el-table-column
			  prop="go"
			  label="处理">
			</el-table-column>
		  </el-table>
	  </div>
  </el-main>
</el-container>
</div>

<script type="text/javascript">
new Vue({
el: '#app',
data() {
	return {
	 tableData: [{
			  date: '2024-05-02',
			  name: 'HUAWEI Mate 30 Pro',
			  address: '买家仅退款',
			  go:'待处理'
		}],
	}
}
,methods: {
	
},mounted:function(){
	
},created(){
	
}
})
</script>
</body>
</html>
